<template>
  <div class="symbols-panel" :class="mode">
    <div class="diagram-name">{{ diagramName }} <span v-if="diagram && showIcon & showTip" class="tip">{{this.diagram.tip}}</span></div>
    <div v-if="diagram && showEveryDiagramName">
        {{ diagram.top.name }}{{ diagram.top.element.name
        }}<template v-if="showIcon"><svg class="icon" aria-hidden="true">
            <use :xlink:href="'#icon-' + diagram.top.element.icon"></use></svg></template>
      </div>
    <div class="symbols" :class="{ edit: !lock && editable, showIcon: showIcon }">
      
      <template v-for="(symbol, index) in symbols">
        <div
          class="symbol"
          v-bind:key="index"
          :data-symbol="symbol"
          :class="{
            'no-use': noUse && noUse.indexOf(index) > -1,
          }"
        >
          <div class="six-member" v-if="sixMembers && sixMembers[index]">
            <sup v-if="showIcon">{{sixMembers[index].rate}} {{getRhythm(sixMembers[index])}} {{sixMembers.godEvil[sixMembers[index].earthBranch.name]}}</sup>
            <span v-if="sixGods">{{ sixGods[index] }}·</span
            >{{ sixMembers[index].sixMember.name }}
            <span :style="getHighlightColor(sixMembers[index].earthBranch)" :class="getDecoration(index)"
              >{{ sixMembers[index].earthBranch.name
              }}{{ sixMembers[index].earthBranch.element.name
              }}<template v-if="showIcon"><svg class="icon" aria-hidden="true">
            <use :xlink:href="'#icon-' + sixMembers[index].earthBranch.element.icon"></use>
          </svg>
                
              </template>
            </span>
          </div>

          <div class="bar" @click="changeSymbol(index)">
            <div class="left"></div>
            <div class="middle"></div>
            <div class="right"></div>
          </div>
          <div
            v-if="each != null || other != null || symbol == 9 || symbol == 6"
            class="each-other change"
            :data-each="each == index"
            :data-other="other == index"
          ><span class="changeMean" v-if="showIcon && sixMembers">{{sixMembers[index].changeMean}}</span></div>
        </div>
      </template>
      
    </div>
    <div v-if="diagram && showEveryDiagramName">
        {{ diagram.bottom.name }}{{ diagram.bottom.element.name
        }}<template v-if="showIcon"><svg class="icon" aria-hidden="true">
            <use :xlink:href="'#icon-' + diagram.bottom.element.icon"></use></svg></template>
      </div>
    
    <div class="footer">{{ footerText }}</div>
  </div>
</template>
<script>
import { rhythm } from '../core/consts';
import core from "../core/core";
import { EventBus } from "../core/event-bus";

export default {
  data() {
    return {
      showIcon: true,
    };
  },
  props: [
    "lock",
    "symbols",
    "diagram",
    "sixMembers",
    "each",
    "other",
    "sixGods",
    "editable",
    "noUse",
    "mode",
    "footerText",
    "showEveryDiagramName",
    "highlights",
    "decoration",//月破、日破、旬空的图形化动效
    "showTip", //显示卦名的寓意
  ],
  model: {
    prop: "symbols",
    event: "input",
  },

  methods: {
    changeSymbol: function (i) {
      if (this.lock || !this.editable) return;

      if (this.symbols[i] < 9) this.$set(this.symbols, i, this.symbols[i] + 1);
      else this.$set(this.symbols, i, 6);

      if (this.mode == "plumagram")
        if (this.symbols[i] == 9 || this.symbols[i] == 6) {
          const symbol = this.symbols[i];
          for (let index = 0; index < this.symbols.length; index++) {
            if (this.symbols[index] == 9) this.$set(this.symbols, index, 7);
            if (this.symbols[index] == 6) this.$set(this.symbols, index, 8);
          }
          this.$set(this.symbols, i, symbol);
        }

      this.$emit("input", this.symbols);
    },
    getHighlightColor(branch) {
      const light = core.getHighLight(this.highlights, branch);
      if (light) {
        return {
          fontWeight: "bold",
          color: light.color
        };
      }
    },
    getDecoration(i){
      if(this.showIcon && this.decoration && this.decoration.length == 6){
        return this.decoration[i];
      }
      return "";
    },
    getRhythm(sixMember) {
      return rhythm[sixMember.heavenStem.name + sixMember.earthBranch.name];
    }
  },
  computed: {
    diagramName() {
      if (this.diagram) {
        return core.getDiagramName(this.diagram);
      }
      return "";
    }
  },
  mounted() {
    const showIcon = localStorage.getItem("hexagramShowIcon");
    if(showIcon)
      this.showIcon = localStorage.getItem("hexagramShowIcon") == "true";
    
    EventBus.$on("hexagram-show-icon", (val) => {
      this.showIcon = val;
    });
  },
};
</script>
<style lang="scss" scoped>
.symbols-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(100% / 3);

  .diagram-name {
    margin-bottom: 3vmin;
    position: relative;
    .tip{
      position: absolute;
      display: block;
      font-size: 2vmin;
      text-align: center;
      inset: 0;
      top: 85%;
    }
  }

  .symbols {
    width: 80%;
    transition: all 0.5s;
    padding: 4vmin;
    border-radius: 10px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column-reverse;

    &.edit{
      box-shadow: 0px 0px 20px rgba($color: #000000, $alpha: 0.2);

      .each-other{
        left: 115% !important;
      }

      .bar:active, .bar:hover{
        .left,
        .middle,
        .right{
          background: var(--symbol-active-color);
        }
      }
    }

    &.showIcon{
      padding-bottom: 2vmin;
    }

    .symbol {
      width: 100%;
      height: calc(100% / 11);
      display: flex;
      position: relative;
      justify-content: center;

      .bar {
        display: flex;
        flex: 1;
        .left,
        .middle,
        .right {
          flex: 1;
          background: var(--symbol-primary-color);
        }
      }

      // &.no-use .six-member sup{
      //   display: none;
      // }

      &.no-use .bar {
        .left,
        .middle,
        .right {
          // background: var(--symbol-nouse-color);
        }
      }
      &.no-use * {
        // color: var(--text-nouse-color) !important;
        text-decoration: none !important;
        font-weight: normal !important;
      }
      &[data-symbol="6"],
      &[data-symbol="8"] {
        .middle {
          background: none !important;
        }
      }

      &.no-use {
        opacity: .65;
        // color: var(--text-nouse-color);
      }

      .each-other {
        color: var(--text-primary-color);
        margin-left: 1vmin;
        position: absolute;
        left: 105%;
        width: 2vmin;
        display: flex;
        transition: .5s;
        
        &::before {
          content: " ";
          display: block;
        }
        &[data-each]::before {
          content: "世";
          
        }
        &[data-other]::before {
          content: "应";

        }
      }
      .each-other, .change{
        top: 50%;
        transform: translateY(-50%);
      }
      .six-member {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 1vmin;
        position: relative;
        sup{
          position: absolute;
          left: -8%;
          top: -80%;
          background: var(--rate-tip-color);
          white-space: nowrap;
          text-align: center;
          font-size: 2vmin;
          border-radius: 6px;
          padding: 0 1vmin;
        }
        .dead{
          border: dotted 1px #000;
        }
        .month-break, .day-break, .month-half-break, .day-half-break{
          text-decoration: line-through;
        }
        .month-half-break, .day-half-break{
          text-decoration-style: dotted;
        }
        .dead.day-break, .dead.active {
          border: solid 1px #000;
        }
        .dead.month-break{
          text-decoration: line-through;
        }
        .dead.day-break{
          text-decoration: none;
          animation: blink .8s ease-out infinite forwards alternate-reverse;
        }
        .active{
          text-decoration: none;
          animation: blink .8s ease-out infinite forwards alternate-reverse;
          &.inner{
            animation: none;
            text-decoration: underline wavy;
          }
        }
      }

      @keyframes blink {
        from{
          opacity: .1;
        }
        to{
          opacity: 1;
        }
      }

      &[data-symbol="6"] .change::after {
        content: "✕→";
      }

      &[data-symbol="9"] .change::after {
        content: "○→";
      }
      & .change .changeMean{
        position:absolute;
        white-space: nowrap;
        top: -1.5vmin;
        font-size: 1.5vmin;
      }
    }
  }
  &.plumagram [data-symbol="6"] .change::after {
    content: "✕" !important;
  }
  &.plumagram [data-symbol="9"] .change::after {
    content: "○" !important;
  }
  .footer {
    margin-top: 2vmin;
  }
}
</style>
